<template>
    <div class="market">
        <div v-if="shopShow">
            <van-nav-bar title="积分商城" leftArrow @click-left="_return"/>
            <div class="marketMain">
                <p class="title">当前可以积分 <span>{{mine.integral}}</span></p>
                <div class="list">
                    <ul class="mall-list">
                        <li class="mall-item" v-for="(mall, key) in mine.list" :key="key" @click="handleToDetail(mall)">
                            <div class="mall-item-cover">
                                <img :src="mall.web + mall.goods_logo" :alt="mall.goods_title.substr(0, 10)">
                            </div>
                            <div class="mall-item-desc">
                                <h4 class="mall-item-title">{{ mall.goods_title }}</h4>
                                <div class="mall-item-info">
                                    <div class="mall-item-tip">
                                        <p class="mall-item-price">{{mall.price>10000?(((mall.price-mall.price%1000)/10000+'W')):(mall.price)}} <span>{{$t('node.jifen')}}</span></p>
                                        <p class="mall-item-txt">{{ $t('mall.sold') }}{{mall.package_sale}}{{ $t('mall.pieces') }}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <detail v-if="detailShow" :child="child" @_return="_returns" @showShop="showShop"></detail>
    </div>
</template>

<script>
    import detail from '@/components/node/detail'
    export default {
        data() {
            return {
                page:1,
                mine:{},
                shopShow:true,
                detailShow:false,
                child:0
            }
        },
        methods: {
            getData(){
                this.$api.post('integral/index',{cid:1,page:this.page})
                    .then(res =>{
                        this.mine = res.detail
                    })
            },
            handleToDetail(item){
                this.shopShow = false
                this.detailShow = true
                this.child = item.id
            },
            _return(){
                this.$emit('_return')
            },
            _returns(){
                this.shopShow = true
                this.detailShow = false
                this.mine = {}
                this.getData()
            },
            showShop(){
                this.shopShow = true
                this.detailShow = false
                this.mine = {}
                this.getData()
            }
        },
        created() {
            this.getData()
        },
        mounted() {

        },
        components:{
            detail
        }
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .marketMain
        width 94%
        margin 0 auto
        .title
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            height 50px
            line-height 50px
            text-align center
            font-size 16px
            color #D8D8D8
            span
                color #CBAF89
                margin-left 5px
        .mall
            margin-top 10px
            &-list
                display flex
                justify-content space-between
                flex-flow row wrap
            &-item
                width 49%
                margin-top 10px
                background:#FFFFFF
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
                border-radius 0px
                &-cover
                    width 100%
                    height 130px
                    img
                        width 100%
                        height 100%
                &-title
                    padding 10px
                    color #373636
                    line-height 20px
                    overflow hidden
                    text-overflow ellipsis
                    display -webkit-box
                    -webkit-line-clamp 2
                    -webkit-box-orient vertical
                &-desc
                    flex 1
                    display flex
                    flex-flow column nowrap
                    justify-content space-between
                &-count
                    font-size 12px
                    color #898989
                &-tip
                    display flex
                    justify-content space-between
                    padding 0 10px 10px
                &-price
                    font-size 16px
                    color #EF8A00
                    span
                        font-size 10px
                        color #373636
                &-txt
                    font-size 10px
                    color #373636
                    align-self flex-end



</style>